<template>
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div>
        <a-form @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="12">
              <a-form-item label="编码" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input v-model="queryParam.dictCode" placeholder="请输入编码" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="名称1" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input v-model="queryParam.dictName" placeholder="请输入名称" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="名称2" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input v-model="queryParam.dictName" placeholder="请输入名称" />
              </a-form-item>
            </a-col>
            <template v-if="toggleSearchStatus">
              <a-col :md="6" :sm="12">
                <a-form-item label="名称3" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-input v-model="queryParam.dictName" placeholder="请输入名称" />
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="6" :sm="8">
              <a-form-item>
                <a-button type="primary" icon="search" @click="searchQuery()">查询</a-button>
                <a-button type="primary" icon="reload" style="margin-left: 8px" @click="searchReset()">重置</a-button>
                <a style="margin-left: 8px" @click="handleToggleSearch">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                </a>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!-- table区域-begin -->
      <div>
        <vxe-grid
          id="AutoList"
          ref="vxeTable"
          v-bind="gridOptions"
          :row-config="{keyField:'bizCode'}"
          v-on="listeners"
        >
          <template #action="{ row }">
            <template>
              <a @click="handleEdit(row)" v-hasPermi="auth.permi.edit">编辑</a>
              <a-divider type="vertical" />
              <a-dropdown>
                <a class="ant-dropdown-link">
                  更多 <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a href="javascript:;" @click="handleDetail(row)">详情</a>
                  </a-menu-item>
                  <a-menu-item v-hasPermi="auth.permi.delete">
                    <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.id)">
                      <a>删除</a>
                    </a-popconfirm>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>
          </template>
        </vxe-grid>
      </div>
      <!-- table区域-end -->
      <AutoModal ref="modalForm" @ok="modalFormOk" />
    </a-card>
</template>

<script>
import AutoModal from './modules/AutoModal'
// 引入通用Mixin
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
export default {
  name: 'AutoList',
  components: {
    AutoModal
  },
  mixins: [VxeTableListMixin],
  data() {
    return {
      columns: [
        { type: 'checkbox', width: 40 },
        { type: 'seq', width: 40 },
        { title: '编码', field: 'dictCode', sortable: true },
        { title: '名称', field: 'dictName' },
        { title: '默认值', field: 'dictDefaultValue' },
        { title: '描述', field: 'dictDesc' },
        { title: '类别', field: 'dictType', slots: { default: ({ row }) => {
          return row.dictType === '1' ? '系统字典' : '业务字典'
        } }
        },
        { title: '操作', field: 'action', slots: { default: 'action' }, width: 120 }
      ],
      url: {
        list: '/sys/dict/tree/page',
        delete: '/erp/sales/so/remove/',
        deleteBatch: '/erp/sales/so/remove/'
      },
      auth: {}
    }
  },
  methods: {
    initAuth() { // 初始化权限
      const name = this.$options.name
      this.$set(this.auth, 'permi', { // 权限规则为erp:组件名:权限分类标识
        table: `erp:${name}:table`, // 表格数据权限
        add: `erp:${name}:add`, // 数据新增权限
        edit: `erp:${name}:edit`, // 数据编辑权限
        delete: `erp:${name}:delete`, // 数据删除权限
        deleteBatch: `erp:${name}:deleteBatch`, // 数据批量删除权限
        import: `erp:${name}:import`, // 数据导入权限
        export: `erp:${name}:export` // 数据导出权限
      })
    }
  }
}
</script>

